<template>
<div>
  <div v-if="show" class="terminal-index">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-button type="primary" size="small" icon="el-icon-plus" @click="ToBindTerminal">绑定终端</el-button>
      <el-button type="success" size="small" @click="ToCloudSpeaker">云喇叭管理</el-button>
    </el-row>
    <el-row class="mt-10">
      <el-table size="small" :data="date">
        <el-table-column align="center" label="终端编号" prop="sys_code"></el-table-column>
        <el-table-column align="center" label="所属门店" prop="store_name"></el-table-column>
        <el-table-column align="center" label="终端类别" prop="category_name"></el-table-column>
        <el-table-column align="center" label="终端名称" prop="device_name"></el-table-column>
        <el-table-column align="center" label="终端SN码" prop="device_sn"></el-table-column>
        <el-table-column align="center" label="绑定时间" prop="create_at"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClickCheckList(scope.row.id, scope.$index)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="fr mt-10" layout="total, prev, pager, next" :total="page.total" :page-size="page.size" :current-page.sync="page.current" @current-change="handleTablePage"></el-pagination>
    </el-row>
    <el-dialog :visible.sync="list" title="终端详情" width="400px">
      <p>终端编号：{{ dialog.sys_code }}</p>
      <p>终端类型：{{ dialog.category_name }}</p>
      <p>终端名称：{{ dialog.device_name }}</p>
      <p>终端SN码：{{ dialog.device_sn }}</p>
      <p>绑定状态：{{ dialog.status }}</p>
      <p v-if="dialog.category_name === '云打印'">客户密码：{{ dialog.pwd }}</p>
      <p v-if="dialog.category_name === '云打印'">连接状态：{{ dialog.conn_status }}</p>
      <p>所属代理商：{{ dialog.agent_name }}</p>
      <p>入库时间：{{ dialog.depot_create_at }}</p>
      <p>所属商户：{{ dialog.merchant_id }}</p>
      <p>所属门店：{{ dialog.store_id }}</p>
      <p>绑定时间：{{ dialog.create_at }}</p>
      <p>终端备注：{{ dialog.remarks }}</p>
      <div slot="footer">
        <el-button size="small" type="primary" @click="handleClickRemoveBind">解除绑定</el-button>
      </div>
    </el-dialog>
  </div>
  <div v-else>
    <router-view></router-view>
  </div>
</div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { TerminalInit, TerminalTablePage, TerminalCheck, TerminalRemoveBind } from '@/api/shop'

export default {
  name: 'terminal',
  components: {
    Breadcrumb
  },
  data() {
    return {
      show: null,
      list: false,
      page: {
        total: 0,
        size: 0,
        current: 1
      },
      date: [],
      dialog: {
        index: '',
        id: '',
        sys_code: '',
        device_sn: '',
        status: '',
        conn_status: '',
        device_name: '',
        category_name: '',
        create_at: '',
        pwd: '',
        store_id: '',
        merchant_id: '',
        agent_name: '',
        remarks: '',
        depot_create_at: ''
      }
    }
  },
  methods: {
    handleInit() {
      TerminalInit(this.$route.query.store_id).then(response => {
        if (response.data.errorCode === 0) {
          this.date = response.data.result.binds.data
          this.page.size = response.data.result.binds.per_page
          this.page.total = response.data.result.binds.total
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleTablePage(v) {
      TerminalTablePage(this.$route.query.store_id, v).then(response => {
        if (response.data.errorCode === 0) {
          this.$nextTick(() => {
            this.date = response.data.result.binds.data
            this.page.size = response.data.result.binds.per_page
            this.page.total = response.data.result.binds.total
            this.page.current = response.data.result.binds.current_page
          })
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    ToBindTerminal() {
      this.$router.push({ name: 'bindTerminal', query: { store_id: this.$route.query.store_id }})
    },
    ToCloudSpeaker() {
      this.$router.push({ name: 'cloudSpeaker', query: { store_id: this.$route.query.store_id }})
    },
    handleClickCheckList(id) {
      TerminalCheck(id).then(res => {
        this.$nextTick(() => {
          if (res.data.errorCode === 0) {
            this.dialog.id = res.data.result.id
            this.dialog.agent_name = res.data.result.agent_name
            this.dialog.category_name = res.data.result.category_name
            this.dialog.conn_status = res.data.result.conn_status
            this.dialog.create_at = res.data.result.create_at
            this.dialog.depot_create_at = res.data.result.depot_create_at
            this.dialog.depot_id = res.data.result.depot_id
            this.dialog.device_name = res.data.result.device_name
            this.dialog.merchant_id = res.data.result.merchant_id
            this.dialog.remarks = res.data.result.remarks
            this.dialog.status = res.data.result.status
            this.dialog.store_id = res.data.result.store_id
            this.dialog.pwd = res.data.result.pwd
            this.dialog.sys_code = res.data.result.sys_code
            this.dialog.device_sn = res.data.result.device_sn
            this.list = true
          } else {
            this.$message.error(res.date.errorMsg)
          }
        })
      })
    },
    handleClickRemoveBind() {
      this.$msgbox({
        title: '终端解绑',
        message: '终端解绑后将无法正常使用终端功能，你是否确定解除' + this.dialog.category_name + this.dialog.device_sn + '？',
        showCancelButton: true,
        confirmButtonText: '决意解绑',
        cancelButtonText: '再考虑一下',
        confirmButtonClass: 'el-button--danger',
        cancelButtonClass: 'el-button--info'
      }).then(() => {
        TerminalRemoveBind(this.dialog.id).then(res => {
          if (res.data.errorCode === 0) {
            this.$message.success(res.data.errorMsg)
            TerminalTablePage(this.$route.query.store_id, this.page.current).then(response => {
              if (response.data.errorCode === 0) {
                this.$nextTick(() => {
                  this.date = response.data.result.binds.data
                  this.page.size = response.data.result.binds.per_page
                  this.page.total = response.data.result.binds.total
                  this.page.current = response.data.result.binds.current_page
                })
              } else {
                this.$message.error(response.data.errorMsg)
              }
            })
            this.list = false
          } else {
            this.$message.error(res.data.errorMsg)
          }
        })
      }).catch(() => {})
    }
  },
  created() {
    this.$nextTick(() => {
      if (this.show) {
        this.handleInit()
      }
    })
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.$route.name === 'terminal' ? this.show = true : this.show = false
    })
  }
}
</script>

<style lang="scss" scoped>
  .terminal-index {
    .el-dialog {
      p {
        font-size: 12px;
      }
    }
  }
</style>

